<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>订单管理</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <link rel="stylesheet" href="${ctx}/css/ui/crowdfund/analyze_list.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .layui-table[lay-size=sm] td, .layui-table[lay-size=sm] th {
            padding: 5px !important;
        }

        .search-container .layui-form-select, .search-container input[type=text] {
            width: 212px !important;
        }

        .my-act-list-content .num li {
            padding-right: 30px !important;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <form class="layui-form" id="myForm" method="post">
                <div class="f-search-bar">
                    <div class="search-container">
                        <ul class="search-form-content">
                            <li class="form-item-inline"><label class="search-form-lable">订单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" class="layui-input" placeholder="请输入查询订单名称" autocomplete="off">
                                </div>
                            </li>
                            <li class="form-item-inline"><label class="search-form-lable">订单编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="id" class="layui-input" placeholder="请输入查询订单编号" autocomplete="off">
                                </div>
                            </li>
                            <li class="form-item-inline"><label class="search-form-lable">交易单号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="transactionId" class="layui-input" placeholder="请输入查询交易单号" autocomplete="off">
                                </div>
                            </li>
                            <li class="form-item-inline"><label class="search-form-lable">商户号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="merchantId" class="layui-input" placeholder="请输入查询商户" autocomplete="off">
                                </div>
                            </li>
                        </ul>
                        <ul class="search-form-content">

                            <li class="form-item-inline"><label class="search-form-lable">下单者</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="memberName" class="layui-input" placeholder="请输入查询订单下单者" autocomplete="off">
                                </div>
                            </li>
                            <li class="form-item-inline"><label class="search-form-lable">所属者</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="initiatorName" class="layui-input" placeholder="请输入查询订单所属者" autocomplete="off">
                                </div>
                            </li>
                            <li class="form-item-inline">
                                <label class="search-form-lable">支付类型</label>
                                <div class="layui-input-inline">
                                    <select name="paymentWay">
                                        <option value="">全部</option>
                                        <option value="1">微信</option>
                                        <option value="0">支付宝</option>
                                    </select>
                                </div>
                            </li>
                            <li class="form-item-inline">
                                <label class="search-form-lable">订单状态</label>
                                <div class="layui-input-inline">
                                    <select name="status">
                                        <option value="">全部</option>
                                        <c:forEach var="map" items="${orderStatus}">
                                            <option value="${map.key}">${map.value}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </li>
                        </ul>
                        <ul class="search-form-content">
                            <li class="form-item"><label class="search-form-lable">更新时间</label>
                                <div class="check-btn-inner" id="timeType">
                                    <a href="javascript:void(0);" onclick="mainApp.setTimeType($(this),0)" class="active">全部</a>
                                    <a href="javascript:void(0);" onclick="mainApp.setTimeType($(this),4)">昨天</a>
                                    <a href="javascript:void(0);" onclick="mainApp.setTimeType($(this),1)">今天</a>
                                    <a href="javascript:void(0);" onclick="mainApp.setTimeType($(this),2)">本周内</a>
                                    <a href="javascript:void(0);" onclick="mainApp.setTimeType($(this),3)">本月内</a>
                                    <input type="hidden" name="timeType"/>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" name="createStart" placeholder="开始日">
                                    </div>
                                    -
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" name="createEnd" placeholder="截止日">
                                    </div>
                                </div>
                            </li>
                            <li class="form-item-inline">
                                <label class="search-form-lable">交易状态</label>
                                <div class="layui-input-inline">
                                    <select name="tradeStatus">
                                        <option value="">全部</option>
                                        <option value="1">交易成功</option>
                                        <option value="2">未支付</option>
                                        <option value="3">已退款</option>
                                        <option value="4">交易不存在</option>
                                    </select>
                                </div>
                            </li>
                        </ul>
                        <ul class="search-form-content">
                            <li class="form-item"><label class="search-form-lable">订单类型</label>
                                <div class="check-btn-inner">
                                    <a href="javascript:void(0);" onclick="mainApp.setOrderType($(this),'')" class="active">全部</a>
                                    <c:forEach var="map" items="${orderTypes}">
                                        <a href="javascript:void(0);"
                                           onclick="mainApp.setOrderType($(this),'${map.key}')">${map.value}</a>
                                    </c:forEach>
                                    <input type="hidden" name="type"/>
                                </div>
                            </li>
                            <li class="form-item-inline">
                                <div class="sub-btns">
                                    <a class="layui-btn layui-btn-danger" href="javascript:mainApp.reloadTable()">确定</a>
                                    <a class="layui-btn layui-btn-normal"
                                       href="javascript:resetFunction('#myForm')">重置</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
            <div class="my-act-list-content">
                <ul class="num">
                    <div class="l">
                        <li class="f16">流水总额<span class="red allTotal"></span> 元</li>
                        <li class="f16">支付总额<span class="red orderTotal"></span> 元</li>
                        <li class="f16">退款总额<span class="red refundOrderTotal"></span> 元</li>
                        <li class="f16">同行者商户支付总额<span class="red txzOrderTotal"></span> 元</li>
                    </div>
                    <%--<div class="l" style="width: 10%">
                        <li style="cursor: pointer;" class="r"><a class="layui-btn layui-btn-danger layui-btn-sm"
                                                                  id="btnExport">导出EXCEL</a></li>
                    </div>--%>
                    <p class="cl"></p>
                </ul>
                <div class="cl">
                    <table id="order_table" class="analyze-table" lay-filter="order_table"></table>
                </div>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
    <div id="authorDialog">
        <table class="layui-table" lay-skin="line">
            <tbody>
            <tr>
                <td class="table-member">
                    <div class="member-cell">
                        <div class="member-logo"></div>
                        <div class="member-name ellipsis-1">
                            <a href="javascript:void(0);"></a>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript">
    var laytpl, laypage, element, laytable, analyzeT, mainApp, loadingIndex, layfrom, laydate;
    $(function () {
        layui.use(['laytpl', 'laypage', 'element', 'table', 'form', 'laydate'], function () {
            laytpl = layui.laytpl;
            laypage = layui.laypage;
            element = layui.element;
            laytable = layui.table;
            layfrom = layui.form;
            laydate = layui.laydate;

            // 查询发布日期
            var start = {
                elem: 'input[name=createStart]'
            };

            var end = {
                elem: 'input[name=createEnd]'
            };
            laydate.render(start);
            laydate.render(end);


            var opts = {
                id: 'order_table',
                elem: '#order_table',
                url: '${ctx}/order/order/api/list.do',
                method: 'post',
                where: {
                    id: '',
                    transactionId: '',
                    merchantId: '',
                    title: '',
                    memberName: '',
                    initiatorName: '',
                    paymentWay: '',
                    status: '',
                    tradeStatus: '',
                    timeType: '',
                    createStart: '',
                    createEnd: '',
                    type: ''
                },
                request: {
                    pageName: 'pageNo', //页码的参数名称，默认：page
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                limit: '20',
                skin: '1',
                page: {
                    theme: '#e8473f'
                },
                even: true, //开启隔行背景
                size: 'sm', //小尺寸的表格
                height: 'full-250',
                cellMinWidth: 100,
                done: function () {
                    layer.close(loadingIndex);
                },
                cols: [[
                    {
                        field: 'title',
                        title: '订单名称',
                        width: '15%',
                        templet: '<div><div class="ellipsis-1" title="{{ d.title }}" onclick="openDialogNoButton(\'订单详情\',\'${ctx}/order/order/orderInfo.do?id={{ d.id }}\',\'500px\',\'620px\')">' +
                            '<a style="width: 250px;cursor: pointer;" class="blue">{{ d.title }}</a></div></div>'
                    },
                    {
                        field: 'authorName',
                        title: '下单者',
                        width: '10%',
                        templet: '<div><div class="member-cell" onclick="openDialogShow(\'用户名片\',\'${ctx}/system/member/memberView.do?id={{d.memberId}}\',\'400px\',\'470px\')">\n' +
                            '     <img class="member-logo-img" src="{{ d.member.logo }}?imageMogr2/auto-orient/crop/126x126" onerror=null;src=\'${ctx}/image/def_user_logo.png\' />' +
                            '     <div class="member-name ellipsis-1">' +
                            '       <a title="{{d.member.realname || \'\'}}" href="javascript:void(0);">{{d.member.realname || \'\'}}</a>\n' +
                            '     </div>\n' +
                            ' </div></div>'
                    },
                    {
                        field: 'initiatorName',
                        title: '所属者',
                        width: '10%',
                        templet: '<div><div class="member-cell" onclick="openDialogShow(\'用户名片\',\'${ctx}/system/member/memberView.do?id={{d.initiatorId}}\',\'400px\',\'470px\')">\n' +
                            '     <img class="member-logo-img" src="{{ d.initiator.logo }}?imageMogr2/auto-orient/crop/126x126" onerror=null;src=\'${ctx}/image/def_user_logo.png\' />' +
                            '     <div class="member-name ellipsis-1">' +
                            '       <a title="{{d.initiator.realname || \'\'}}" href="javascript:void(0);">{{d.initiator.realname || \'\'}}</a>\n' +
                            '     </div>\n' +
                            ' </div></div>'
                    },
                    {
                        field: 'merchantName', title: '商户', width: '10%',
                        templet: '<div><div title="{{ d.merchantName }}" class="ellipsis-1">{{ d.merchantName || \'\'}}</div></div>'
                    },
                    {
                        field: 'typeName', title: '类型', width: '6.5%'
                    },
                    {
                        field: 'payment', title: '金额', width: '6.5%'
                    },
                    {
                        field: 'paymentWay', title: '支付方式', width: '5%',
                        templet: '<div>{{d.paymentWay == 1 ? \'微信\' : \'\' }}{{d.paymentWay == 0 ? \'支付宝\' : \'\' }}</div>'
                    },
                    {
                        field: 'statusName', title: '支付状态', width: '5%',
                        templet: '<div><div class="{{# if(d.status == 2){ }} red {{# } }}">{{ d.statusName }}</div></div>'
                    },
                    {
                        field: 'tradeState', title: '交易状态', width: '6.5%',
                        templet: '<div><div title="{{ d.tradeState }}">{{ d.tradeState  || \'\' }}</div></div>'
                    },
                    {
                        field: 'updateDate', title: '更新时间', width: '8.5%',
                        templet: '<div><div title="{{util.getDateStr(d.updateDate).Format(\'yyyy-MM-dd HH:mm:ss\')}}">{{util.getDateStr(d.updateDate).Format(\'yy-MM-dd HH:mm:ss\')}}</div></div>'
                    },
                    {
                        field: 'option', title: '操作', width: 100,
                        templet: '<div><div class="comm-opts">' +
                            ' <a class="red" href="javascript:mainApp.checkOrder(\'{{ d.id }}\')" target="_self">对账</a>' +
                            ' {{# if(d.type == 3 || d.type == 7){ }} ' +
                            '   <a href="javascript:mainApp.showAuthor(\'{{ d.id }}\')" class="green">查看众筹者</a>' +
                            ' {{# } }} ' +
                            '</div></div>'
                    }
                ]]
            }

            analyzeT = laytable.render(opts);

            mainApp.initOrderData();
        });

        mainApp = {
            reloadTable: function () {
                loadingIndex = layer.load(1);
                var formData = util.serializeForm($('#myForm').serializeArray());
                analyzeT.reload({
                    where: formData,
                    page: {
                        theme: '#e8473f',
                        curr: 1 //重新从第 1 页开始
                    }
                });

                mainApp.initOrderData();
            },
            setOrderType: function (o, value) {
                $('input[name=type]').val(value);
                $(o).parent(".check-btn-inner").find("a").removeClass("active");
                $(o).addClass('active');
                mainApp.reloadTable();
            },
            setTimeType: function (o, value) {
                $('input[name=timeType]').val(value);
                $(o).parent(".check-btn-inner").find("a").removeClass("active");
                $(o).addClass('active');
                mainApp.reloadTable();
            },
            checkOrder: function check(orderId) {
                //loading层
                var loadIndex = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                $.post("${ctx}/payquery/orderQuery.do", {
                    "orderId": orderId
                }, function (data) {
                    top.layer.close(loadIndex);
                    setTimeout(function () {
                        if (data.success == true) {
                            util.layerMsgSuccess("对账成功！", function () {
                                mainApp.reloadTable();
                            });
                        } else {
                            util.layerMsgError(data.description)
                        }
                    }, 500);
                });
            },
            showAuthor: function showAuthor(orderId) {
                var setPayIndex = layer.open({
                    type: 1,
                    area: '400px',
                    title: '查看众筹者',
                    content: $("#authorDialog"),
                    btn: ['关闭'],
                    success: function () { // 弹出后回调
                        $.get('${ctx}/crowdfund/project/getProjectAuthorByOrder.do', {'orderId': orderId}, function (res) {
                            if (res.success) {
                                var logo = res.data.authorLogo;
                                if (logo) {
                                    $("#authorDialog").find(".member-logo").css('background-image', 'url(' + logo + '?imageMogr2/auto-orient/crop/126x126)');
                                } else {
                                    $("#authorDialog").find(".member-logo").css('background-image', 'url(${ctx}/image/def_user_logo.png)');
                                }
                                $("#authorDialog").find(".member-name a").text(res.data.authorName);
                            } else {
                                util.layerMsgError("查看众筹者失败");
                            }
                        })
                    },
                    end: function () { // 销毁后回调
                        $("#authorDialog").find(".member-logo").css('background-image', '');
                        $("#authorDialog").find(".member-name a").text('');
                    },
                    yes: function () { // 确定按钮
                        layer.close(setPayIndex);
                    }
                });
            },
            initOrderData: function initData() {
                $.post("${ctx}/order/order/getOrderData.do", $("#myForm").serialize(), function (res) {
                    if (res.success) {
                        $(".allTotal").text(res.data.allTotal);
                        $(".orderTotal").text(res.data.orderTotal);
                        $(".refundOrderTotal").text(res.data.refundOrderTotal);
                        $(".txzOrderTotal").text(res.data.txzOrderTotal);
                    } else {

                    }
                })
            }
        }

        $("#btnExport").click(function () {
            layer.confirm('确认要导出Excel吗?', {
                icon: 3,
                title: '系统提示'
            }, function (index) {
                var url = "${ctx}/order/order/exportOrder.do";
                //loading层
                var loadIndex = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                $.post(url, $("#myForm").serialize(), function (res) {
                    top.layer.close(loadIndex);
                    if (res.success) {
                        window.location.href = res.data;
                    } else {
                        util.layerMsgError(res.description)
                    }
                });
                top.layer.close(index);
            });
        });
    })
</script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '订单管理',
            curr: true
        }]
    });
</script>
</body>
</html>